import React, {ReactNode, useState} from "react";
import ProCard from "@ant-design/pro-card";
import {ProCardTabsProps} from "@ant-design/pro-components";
import {useMount} from "ahooks";
import {findByDataList} from '@/services/ant-design-pro/poster';
import MyImageEdit from "@/components/MyImageEdit";

interface RecordType {
  key: string;
  label: string;
  children: ReactNode;
}


const Page: React.FC = () => {
  const [tab, setTab] = useState ( "0" );
  const [tabPosition, setTabPosition] = useState<ProCardTabsProps['tabPosition']> ( 'top' );
  const [items,setItems] = useState<RecordType[]>()


  useMount ( () => {

    findByDataList ().then ( res => {
      const mockData: RecordType[] = res.data.map ( (_, i) => ({
        key: i+"",
        label: _?.name,
        children: <MyImageEdit id={_?.id} type={_?.type} keyNames={_?.attr?.split(",")} />
      }) );
      console.log(mockData)
      setItems(mockData)
    } )
  } );


  return (<> <ProCard title={"HHHHH"}
    headStyle={{padding: '10'}}
    tabs={{
      tabPosition,
      activeKey: tab,
      items:items,
      onChange: (key) => {
        setTab ( key );
      },
    }}
  />

  </>)
}

export default Page;
